import style from './home.less'
import { useState, useEffect } from 'react'
import { useNavigate, Outlet } from "react-router-dom";
import Header from "@/components/header/header";
import { home } from "@/serve/_";
import { Button } from 'react-vant';
import { Tabs } from 'react-vant'

export default function Home() {

  // const navigate = useNavigate();

  // const [news, setNews] = useState([
  //   { id: 1, title: '你好1' },
  //   { id: 2, title: '你好2' },
  //   { id: 3, title: '你好3' },
  // ])

  // const [ isVip, setIsVip ] = useState(true)
  // const [ params, setParams ] = useState({
  //   phone: '15056042604',
  //   pwd: ''
  // })

  const [state, setState] = useState({
    data: []
  })


  useEffect(() => {

    getHomeData()

    return () => {
      console.log("组件卸载时候执行");
    }
  }, [])

  const getHomeData = async () => {
    let res = await home()
    setState({ data: res.list })
  }

  const enterInfo = (id) => {
    setIsVip(!isVip)
    // console.log(id);
    // navigate("/info", { state: id })
    // navigate(`/info/${id}`)
  }

  return (
    <div className="home">
      <h1>首页</h1>
      
      {/* <Tabs>
        {[1, 2, 3, 4, 5, 6, 7, 8].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            内容 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
       */}

      <Button type='danger'>Dangeer</Button>
      <ul>
        {
          state.data.map(item => {
            return (
              <li key={item.id}>
                <img src={item.img_src} alt="" />
                <p>{item.title}</p>
              </li>
            )
          })
        }
      </ul>


    </div>
  )
}
